<template>
  <view class="app-container">
    <view class="wallet-card">
      <view class="info">
        <u-text text="可用余额"></u-text>
        <u-text
          mode="price"
          :text="store.state.user.userInfo.balance"
          bold
          size="28"
        ></u-text>
      </view>
      <view>
        <u-button type="success" @click="toRecharge">充值</u-button>
      </view>
    </view>
    <scroll-view scroll-y style="height: calc(100vh - 100px)">
      <view class="conetnt p-20">
        <template v-if="list.length">
          <view
            v-for="(item, index) in list"
            :key="index"
            class="p-20"
            style="border-bottom: 1px solid #ccc"
          >
            <view class="item">
              <view class="flex justify-between items-center">
                <view>
                  <u-text :text="item.remark" size="18"></u-text>
                  <u-gap height="10"></u-gap>
                  <u-text :text="item.created_at" type="info"></u-text>
                </view>
                <view>
                  <u-text
                    :text="`${item.type == 'income' ? '+' : '-'}${item.amount}`"
                    :color="item.type == 'income' ? 'red' : 'green'"
                  ></u-text>
                </view>
              </view>
            </view>
          </view>
        </template>
        <template v-else>
          <my-empty type="wallet" text="暂无数据"></my-empty>
        </template>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { onReady } from "@dcloudio/uni-app";
import { useStore } from "vuex";
import { reactive, ref } from "vue";

const store = useStore();

const query = reactive({
  page: 1,
  size: 10,
});

const list = ref([]);

const pageTotal = ref(0);

async function getList() {
  const response = await store.dispatch("fetchWalletRecord", query);
  if (response) {
    list.value = response.records;
    pageTotal.value = response.total_page;
  }
}

function toRecharge() {
  uni.navigateTo({
    url: "/pages/user/wallet/recharge",
  });
}

onReady(async () => {
  await getList();
});
</script>

<style lang="scss" scoped>
.wallet-card {
  height: 100px;
  border-radius: 10rpx;
  margin: 20rpx;
  background-color: #fff;
  box-shadow: 0 0 10rpx #ccc;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
